<template>
  <div class="fy-header" style="position: absolute; width: 100%; z-index: 100">
    <div>
      <a href="/"> <img src="/logo.svg" alt="" /></a>
      <el-menu :default-active="activeIndex" class="el-menu-demo" id="fyheader" mode="horizontal">
        <el-menu-item index="1" @click="goHome">首页</el-menu-item>
        <el-menu-item index="2">菜系</el-menu-item>
        <el-menu-item index="3">分类</el-menu-item>
        <el-menu-item index="4" @click="$router.push('/xch')">品牌</el-menu-item>
        <el-submenu v-if="person || uname" index="5">
          <template slot="title">我的</template>
          <el-menu-item index="5-1" @click="gomeaningHome">查看信息</el-menu-item>
          <el-menu-item index="5-2" @click="gonotice">消息</el-menu-item>
          <el-menu-item index="5-3" @click="gotc">退出登录</el-menu-item>
        </el-submenu>
        <el-menu-item index="5" @click="goLogin" v-else>登录</el-menu-item>
        <el-menu-item>
          <el-button round size="small">EN</el-button>
        </el-menu-item>
        <el-menu-item>
          <el-button round size="small">繁</el-button>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      activeIndex: "1",
      person: false,
    };
  },
  computed: {
    // 辅助函数: 引入vuex中共享的uname
    ...mapState(["uname"]),
  },
  methods: {
    ...mapMutations(["updateUname"]),
    gotc() {
      localStorage.setItem("token", "");
      this.$store.commit("updateUname", "");
      localStorage.token = "";
      window.onbeforeunload = function (e) {
        var storage = window.localStorage;
        storage.clear();
      };
      this.$router.push("/login");
      this.person = localStorage.token ? true : false;
    },
    goHome() {
      if (this.$route.path == "/") return;
      this.$router.push("/");
    },
    goLogin() {
      window.location.href = "/login";
      if (this.$route.path == "/login") return;
      this.$router.push("/login");
    },
    gomeaningHome() {
      if (this.$route.path == '/meaning/home') return
      this.$router.push('/meaning/home')
    },
    gonotice() {
      if (this.$route.path == '/meaning/notice') return
      this.$router.push('/meaning/notice')
    }
  },
  watch: {
    "$route.path"(newValue, oldValue) {
      let totip = new RegExp("/Xch");
      if (totip.test(oldValue)) this.activeIndex = '1';
      if (newValue == "/") window.location.href = "/";
      console.log(oldValue, newValue);
      if (newValue == "/login")
        this.activeIndex = '5';
      if (oldValue == '/login' && newValue == '/meaning/home') {
        // console.log(1);
        this.activeIndex = '5'
        // window.location.href = '/meaning/home'
      }
    },
  },
  mounted() {
    if (this.$route.path == '/') this.activeIndex = '1';
    if (this.$route.path == '/login' || this.$route.path == '/meaning/home') this.activeIndex = '5';
    this.person = localStorage.token ? true : false;
  },
};
</script>

<style lang="scss">
#fyheader.el-menu.el-menu--horizontal {
  border: 0;
  background-color: transparent;

  .el-menu-item {
    color: #375141;
    font-size: 16px;
    padding: 0 36px;
    background-color: transparent;
    letter-spacing: 1.5px;

    &.is-active {
      color: #f87171;
      letter-spacing: 1.5px;
      font-weight: 600;
      border-bottom: 2px solid #f87171;
      background-color: transparent;
    }
  }

  .el-menu-item:nth-last-of-type(-n + 2) {
    padding: 0 15px;

    .el-button--small.is-round {
      background-color: transparent;
      font-size: 14px;
      padding: 7px 12px;
    }

    .el-button--small.is-round:hover {
      color: #f87171;
      border: 1px solid #f87171;
    }

    .el-button--small.is-round:focus {
      color: #f87171;
      border: 1px solid #f87171;
    }
  }
}

* {
  margin: 0;
  padding: 0;
}
</style>

<style lang="scss">
.fy-header>div {
  backdrop-filter: blur(5px);
  background-color: rgba(255, 255, 255, 0.7);
  display: flex;
  justify-content: space-between;

  >a>img {
    width: 156px;
    padding: 8px 32px;
  }
}

.el-submenu__title {
  font-size: 16px !important;
  color: #375141 !important;
}

.el-submenu__title:hover {
  background: transparent !important;
}
</style>
